<template>
  <!-- 隐藏标签栏：方法二：页面覆盖 -->
  <div class="city top-page">
    <div class="top">
      <form action="/">
        <van-search
          v-model="searchValue"
          shape="round"
          show-action
          placeholder="城市/区域/位置"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>

      <van-tabs v-model:active="tabActive" color="#ff9854">
        <!-- 方法一：加载成功再显示 - 用?号处理 or 定义空对象 ref({}) -->
        <!-- <van-tab :title="allCity?.cityGroup?.title">内容 1</van-tab>
        <van-tab :title="allCity?.cityGroupOverSea?.title">内容 2</van-tab> -->

        <!-- 方法二：遍历对象 v-for="(value, key, index) in allCity" -->
        <template v-for="(value, key, index) in allCity" :key="key">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>

    <div class="content">
      <!-- <CityGroup :group-data="currentGroup" /> -->

      <!-- 避免卡顿，v-show判断显示 -->
      <template v-for="(value, key, index) in allCity" :key="index">
        <CityGroup v-show="tabActive == key" :group-data="value" />
      </template>
    </div>
  </div>
</template>

<script setup>
import router from '@/router'
import useCityStore from '@/stores/modules/city'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
import CityGroup from './cpns/city-group.vue'

// 搜索框
const searchValue = ref('')
const onSearch = () => {
  console.log('搜索', searchValue.value)
}
const onCancel = () => {
  router.back()
}

// 标签栏
const tabActive = ref()

/**
 * 这个位置发送网络请求有两个缺点：
 * 1. 如果网络请求太多，会存在大量网络请求和数据的处理逻辑
 * 2. 如果页面封装了很多的子组件，子组件需要数据，需要一步步传递过去(props)
 */
// 1. 网络请求：城市的数据
// const allCity = ref({})
// getCityAll().then((res) => {
//   allCity.value = res.data
// })

// 2. 从 Store 中获取数据
const cityStore = useCityStore()
cityStore.fetchAllCityData()
const { allCity } = storeToRefs(cityStore)

// 目的：获取选中标签后的数据
// 1. 获取正确的key：将tabs中绑定的tabActive正确绑定
// 2. 根据key从allCity获取数据，默认直接获取的数据不是响应式的，所以必须包裹computed
const currentGroup = computed(() => allCity.value[tabActive.value])
</script>

<style lang="less" scoped>
.city {
  // 固定顶部视图，方法一：top固定定位
  // .top {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  // }

  // .content {
  //   margin-top: 98px;
  // }

  // 解决内容滑动，会被覆盖的问题
  .top {
    position: relative;
    z-index: 9;
  }

  // 固定顶部视图，方法二：content滚动布局
  .content {
    height: calc(100vh - 98px);
    overflow-y: scroll;
  }
}
</style>
